<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过山车loader</title>
    <style>
        body{
            margin: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(to right,silver,teal);
        }
        .loader{
            --diameter:10em;
        }
        .loader{
            --width: calc(var(--diameter) * 2);
            width: var(--width);
            height: var(--diameter);
            position:relative;
            --stroke-width: calc(var(--diameter) / 40);
            color: white;
        }
        .loader::before,.loader::after{
           content: "";
            position: absolute;
            bottom: 0;
        }
        /*画出底部*/
        .loader::before{
            width: inherit;
            height: var(--stroke-width);
            background-color: currentColor;
        }
        /*画出圆形轨道*/
        .loader::after{
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            width: var(--diameter);
            height: var(--diameter);
            border: var(--stroke-width) solid;
            border-radius: 50%;
            left: 25%;
        }
        /*画出圆点*/
        .loader {
            --dot-diameter: calc(var(--diameter)/10);
        }
        .loader span{
            position: absolute;
            width: var(--dot-diameter);
            height: var(--dot-diameter);
            background-color: currentColor;
            border-radius: 50%;
            bottom: var(--stroke-width);
            left: calc((var(--width) - var(--dot-diameter)) / 2);
        }
        .loader span{
            /*animation: rotating 2s  linear infinite;*/
            --vertical-center: calc((var(--diameter) / 2 - var(--stroke-width) - var(--dot-diameter)) * -1);
            /*--vertical-center: calc((var(--diameter) / 2 - var(--stroke-width) - var(--dot-diameter)) * -1);*/
            transform-origin:center var(--vertical-center);
        }
        @keyframes rotating {
            0%,10%{
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            60%,100%{
                -webkit-transform: rotate(-1turn);
                -moz-transform: rotate(-1turn);
                -ms-transform: rotate(-1turn);
                -o-transform: rotate(-1turn);
                transform: rotate(-1turn);
            }
        }
        /*移动效果*/
        .loader span{
            animation: run 2s linear infinite,
        rotating 2s linear infinite;
        }
        @keyframes run {
            0%{
                left: calc(var(--dot-diameter) * -1);
            }
            10%,60%{
                left: calc((var(--width) - var(--dot-diameter)) / 2);
            }
            70%,100%{
                left: calc(var(--width));
            }
        }
        .loader span:nth-child(1) {
            animation-delay: 0.075s;
        }

        .loader span:nth-child(2) {
            animation-delay: 0.15s;
        }
    </style>
</head>
<body>
<div class="loader">
    <span></span>
    <span></span>
    <span></span>
</div>
</body>
</html>